<template>
  <div>
    <el-form inline>
      <el-form-item label="选择玩家">
        <el-select
          filterable
          default-first-option
          multiple
          clearable
          style="width: 200px"
          value-key="玩家"
          v-model="selectedPlayer"
          @change="computedRadarData"
        >
          <el-option v-for="item in playerList" :key="item['玩家']" :value="item" :label="item['玩家']">
            <div class="option">
              <span>{{ item["玩家"] }}</span>
              <el-tag :style="{ background: `var(--${item['职业']})`, borderColor: `var(--${item['职业']})` }">{{ item["职业"] }}</el-tag>
            </div>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col class="plr-10" :span="8">
        <el-card>
          <echarts
            class="echarts"
            ref="radarRef"
            title="谁是吕布，谁是马夫！"
            :indicator="radarData.indicator"
            :data="radarData.data"
            :legend="radarData.legend"
          ></echarts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive, nextTick } from "vue";
import echarts from "@/components/echarts/echarts.vue";
import { useStore } from "vuex";

const store = useStore();
const playerList = ref(store.getters.getBaseData);
const selectedPlayer = ref([]);
const radarData = reactive({
  indicator: [],
  data: [],
  legend: [],
});

const radarRef: any = ref();

const computedRadarData = () => {
  if (selectedPlayer.value.length <= 1) {
    radarData.data = [];
    radarData.indicator = [];
    radarData.legend = [];
  } else {
    const firstPlay = selectedPlayer.value[0];
    let { 团长, 帮会名, 玩家, 职业, 等级, 治疗值, 战复, 青灯焚骨, ...otherData } = firstPlay;
    let needData: any = {};
    if (职业 == "素问") {
      const { 人伤, 塔伤, 总伤, 击败, 控制, 伤害效率, ...data } = otherData;
      needData = { ...data, 治疗值, 战复 };
    } else if (职业 == "九灵") {
      needData = { ...otherData, 青灯焚骨 };
    } else if (职业 == "龙吟") {
      needData = { ...otherData, 治疗值 };
    } else if (职业 == "鸿音") {
      needData = { ...otherData, 战复 };
    } else {
      needData = otherData;
    }
    // 计算平均
    let argValue = selectedPlayer.value.reduce((res, obj) => {
      Object.keys(obj).map((key) => {
        res[key] = (res[key] || 0) + Number(obj[key]);
      });

      return res;
    }, {});
    Object.keys(argValue).map((key) => {
      argValue[key] = parseFloat((Number(argValue[key]) / selectedPlayer.value.length).toFixed(2));
    });

    const data = [];
    selectedPlayer.value.map((item, index) => {
      Object.keys(needData).map((key) => {
        !data[index] && (data[index] = []);
        data[index].push(item[key]);
      });
    });

    const indicator = Object.keys(needData).map((key) => {
      return {
        name: key,
        max: argValue[key],
      };
    });
    radarData.data = data;
    radarData.indicator = indicator;
    radarData.legend = selectedPlayer.value.map((item) => item["玩家"]);
  }

  nextTick(() => {
    radarRef.value.init();
  });
};
</script>

<style scoped lang="scss">
.echarts {
  height: 400px;
}

.option {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::v-deep .el-tag {
    color: #333;
  }
}
.dark {
  .option::v-deep .el-tag {
    color: #fff;
  }
}
</style>
